<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/xiangqing.css">

</head>

<body>
  <header></header>
  <main>
    <!-- <div class="main-top">
            <div class="main-topleft">
              <div class="minbox"><img  src="../img/liebiaoimg/1096444919-3622378590025666560-3622378590025670658-1_353x353_90.jpg" alt="" class="ccc">
                <div class="amsk"></div>
            </div>
            <ul>
                <li><img src="../img/liebiaoimg/1096444919-3622378590025666560-3622378590025670658-1_353x353_90.jpg" alt="" class="ccc"></li>
                <li><img src="../img/liebiaoimg/1129009731-387386632046288896-387386632046288898-1_353x353_90.jpg" alt="" class="ccc"></li>
                <li><img src="../img/liebiaoimg/1096444919-3622378590025666560-3622378590025670658-1_353x353_90.jpg" alt="" class="ccc"></li>
                <li><img src="../img/liebiaoimg/1096444919-3622378590025666560-3622378590025670658-1_353x353_90.jpg" alt="" class="ccc"></li>
                <li><img src="../img/liebiaoimg/1096444919-3622378590025666560-3622378590025670658-1_353x353_90.jpg" alt="" class="ccc">
                </li>
                </ul>
            <div class="maxbox"></div>
        


            </div> -->
    <!-- <div class="main-topright"> -->
    <!-- <p style="color: #007cff;">玖姿</p>
                <p>夏季新款annakro系列海星卡通印花短袖连衣裙</p>
                <div class="banner">
                    <div class="bannerleft">
                        <p class="text1"><span class="text2">￥</span>482</p>
                        <p class="text3"><span class="text4">￥1780</span>2.8折</p>
                    </div>
                    <div class="bannerright"><img src="../img/xiangqingye/162496218714.png" alt=""></div>
                </div>
            </div> -->
    <!-- <div id="deta">
              <div id="pip_title">
                <a href="#">玖姿</a>
                <p>夏季新款annakro系列海星卡通印花短袖连衣裙</p>
              </div>
              <div id="pice">
                <div id="sp_info">
                  <span class="span_a">￥829</span>
                  <span class="span_b">￥1990</span>
                  <span class="span_c">2.4折</span>
                  
                </div>
                <div id="sp_time">
                  <img src="../img/xiangqingye/162496218714.png" style="border: none;">
                </div>
              </div>
              <div id="vip">
                0元开通，先享权益后付年费 | 商品立省¥4
                <span>先享后付</span>
              </div>
              <div class="list">
                <h3>配送</h3>
                <a href="#" class="peisong">请选择省市区</a>
              </div>
              <div class="list">
                <h3>运费</h3>
                <a href="#" class="yunfei">订单满88元免运费</a>
              </div>
              <div class="list">
                <h3>颜色</h3>
                <a href="#" class="yanse">蓝</a>
                <a href="#" class="yanse">黄</a>
                <a href="#" class="yanse">黑</a>
              </div>
              <div class="list">
                <h3>尺码</h3>
                <a href="#" class="chima">L</a>
                <a href="#" class="chima">XL</a>
                <a href="#" class="chima">2XL</a>
              </div>
              <div class="list">
                <h3>数量</h3>
                <div id="shuliang">
                  <a href="#">-</a>
                  <em>1</em>
                  <a href="#">+</a>
                </div>
              </div>
              <div class="button">
                <h3></h3>
                <div class="tejia">
                  <div class="local">
                    1234
                  </div>
                  <div class="now" ">
                    <p>加入购物车</p>
                    特卖价&nbsp;抢&gt;
                  </div>
                </div>
              </div>
            </div>
        </div> 
    -->
  </main>
  <footer></footer>
</body>

</html>
<script src="../js/jQuery.js"></script>
<!-- <script src="../js/fangdajing.js"></script> -->
<script>


  var goodsid = location.search.split('=')[1];
  console.log(goodsid);
  let str = "";
  $.get("../goodsAndShoppingCart/getGoodsInfo.php", { goodsId: goodsid }, function (data) {
    console.log(data);
    let dataa = JSON.parse(data)
    console.log(dataa);
    str = `<div class="main-top">
            <div class="main-topleft">
              <div class="minbox"><img  src="${dataa.goodsImg}" alt="" class="ccc">
                <div class="amsk"></div>
            </div>
            <ul>
                <li><img src="${dataa.goodsImg}" alt="" class="ccc"></li>
                <li><img src="${dataa.beiyong5}" alt="" class="ccc"></li>
                <li><img src="${dataa.beiyong6}" alt="" class="ccc"></li>
                <li><img src="${dataa.beiyong7}" alt="" class="ccc"></li>
                <li><img src="${dataa.beiyong8}" alt="" class="ccc">
                </li>
                </ul>
            <div class="maxbox"></div></div>
            <div id="deta">
              <div id="pip_title">
                <a href="#">${dataa.beiyong4}</a>
                <p>${dataa.goodsDesc}</p>
              </div>
              <div id="pice">
                <div id="sp_info">
                  <span class="span_a">￥${dataa.goodsPrice}</span>
                  <span class="span_b">￥${dataa.beiyong2}</span>
                  <span class="span_c">${dataa.beiyong3}折</span>
                  </div>
                <div id="sp_time">
                  <img src="../img/xiangqingye/162496218714.png" >
                </div>
              </div>
              <div id="vip">
                0元开通，先享权益后付年费 | 商品立省¥4
                <span>先享后付</span>
              </div>
              <div class="list">
                <h3>配送</h3>
                <a href="#" class="peisong">请选择省市区</a>
              </div>
              <div class="list">
                <h3>运费</h3>
                <a href="#" class="yunfei">订单满88元免运费</a>
              </div>
              <div class="list">
                <h3>颜色</h3>
                <a href="#" class="yanse">${dataa.beiyong9}</a>
                <a href="#" class="yanse">${dataa.beiyong10}</a>
                <a href="#" class="yanse">${dataa.beiyong11}</a>
              </div>
              <div class="list">
                <h3>尺码</h3>
                <a href="#" class="chima">${dataa.beiyong12}</a>
                <a href="#" class="chima">${dataa.beiyong13}</a>
              </div>
              <div class="list">
                <h3>数量</h3>
                <div id="shuliang">
                  <a href="#">-</a>
                  <em id="goodscount">1</em>
                  <a href="#">+</a>
                </div>
              </div>
              <div class="button">
                <h3></h3>
                <div class="tejia">
                  <div class="local">
                    ${dataa.beiyong2}
                  </div>
                  <div class="now" onclick='ingaddshop()'>
                    <p >加入购物车</p>
                    特卖价&nbsp;抢&gt;
                  </div>
                </div>
              </div>
            </div>
        </div> 
   `
    $('main').html(str);
    abc();

  })
  $("header").load("header.html")
  $("footer").load("footer.html")
  // let minbox=document.querySelector('.minbox')
  // let amsk=document.querySelector('.amsk')
  // let maxbox=document.querySelector('.maxbox')
  // let imgs=document.querySelectorAll(".ccc")
  // console.log(imgs);
  // let s=new Car(minbox,amsk,maxbox,imgs)
  function abc() {
    class Car {
      constructor() {
        this.minbox = document.querySelector('.minbox');
        this.amsk = document.querySelector('.amsk');
        this.maxbox = document.querySelector('.maxbox')
        this.img = document.querySelectorAll(".ccc")
        this.index = 1
        this.maxbox.style.backgroundImage = `url(${this.img[0].src})`

      }
      mouseover() {
        let that = this;
        this.minbox.onmouseover = function () {
          that.amsk.style.display = 'block';
          that.maxbox.style.display = 'block'
        }
      }
      mouseout() {
        let that = this;
        this.minbox.onmouseout = function () {
          that.amsk.style.display = 'none';
          that.maxbox.style.display = 'none'
        }
      }
      mousemove() {
        let that = this;
        this.minbox.onmousemove = function (evt) {
          let e = evt || event;
          let left = e.pageX - this.offsetLeft - that.amsk.offsetWidth / 2;
          let top = e.pageY - this.offsetTop - that.amsk.offsetHeight / 2;
          if (left < 0) {
            left = 0
          }
          if (top < 0) {
            top = 0
          }
          let maxleft = this.offsetWidth - that.amsk.offsetLeft;
          if (left > maxleft) {
            left = maxleft
          }
          let maxtop = this.offsetHeight - that.amsk.offsetTop;
          if (top > maxtop) {
            top = maxtop
          }
          let x = that.maxbox.offsetWidth * left / that.amsk.offsetWidth
          let y = that.maxbox.offsetHeight * top / that.amsk.offsetHeight
          that.maxbox.style.backgroundPositionX = -x + 'px'
          that.maxbox.style.backgroundPositionY = -y + 'px'
          that.amsk.style.left = left + 'px'
          that.amsk.style.top = top + 'px'
        }
      }
      setborder() {

        for (let i = 0; i < this.img.length; i++) {
          if (this.index == i) {
            this.img[i].style.border = '1px solid red'
          } else {
            this.img[i].style.border = 'none'
          }

        }
      }
      setclick() {
        let that = this;
        for (let i = 0; i < this.img.length; i++) {
          this.img[i].onclick = function () {
            that.index = i
            that.setborder()

            that.img[0].src = that.img[i].src
            that.maxbox.style.backgroundImage = `url(${that.img[0].src})`
          }
        }
      }
    }
    let f = new Car();
    f.mouseover();
    f.mouseout();
    f.mousemove();
    f.setclick()
    f.setborder()
  }

  // $(function () {
  //   $(".now").on("click", '.now_', function () {
  //     console.log("now",now);
  //     addShoppingCar(goodsid)
  //   })
  // })
  // function addShoppingCar(goodsid) {
  //   $.post("../goodsAndShoppingCart/addShoppingCart.php",
  //     {
  //       vipName: '18966681197',
  //       goodsId: goodsid,
  //       goodsCount: $('#goodscount').html()
  //     },
  //     function (data) {
  //       if (data == '1') {
  //         alert("添加成功")
  //       } else if (data == '0') {
  //         alert("添加失败")
  //       }
  //     }
  //   )
  // }
  function getCookie(value) {
			var cookie = document.cookie;// username=zhangsan; sex=男; age=18
			var arr = cookie.split('; ');// ['username=zhangsan','sex=男','age=18']
			for (var i in arr) {//item  'username=zhangsan'    'sex=男'    'age=18'
				var newarr = arr[i].split('=');//第一项 ["username",'zhangsan']      第二项 ...  ['sex','男']
				if (newarr[0] == value) {
					return newarr[1]; //如果存在value， 说明 newarr[1]就想要的结果  return 终止函数的执行
				}
			}
			return '';
		}

	//点击添加购物车
	function ingaddshop(){
			$.post('../goodsAndShoppingCart/addShoppingCart.php',{vipName:getCookie('username'),goodsId:goodsid,goodsCount:'1'},function(data){
				if(data==1){
					alert('已添加至购物车')
				}else{
					alert('添加购物车失败')
				}

			}
			)}



</script>